import styles from './index.less'
import { DEFAULT_LOGO, DEFAULT_NAME, PLATFORM_URL } from '@/constants'
import { useModel, history } from '@umijs/max'
import md5 from 'js-md5'

import { LockOutlined, MobileOutlined, UserOutlined, LeftOutlined } from '@ant-design/icons'
import { LoginForm, ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-components'
import { Tabs, App } from 'antd'
import { useEffect, useState } from 'react'
import { clearCookie } from '@/utils/utils'

const Login = () => {
  const { message } = App.useApp()
  const { LoginByMobile, SendCode, platformType } = useModel('Global')
  const [isForgotPassword, setIsForgotPassword] = useState<Boolean>(false)

  useEffect(() => {
    if (platformType) {
      window.location.href = `${(PLATFORM_URL as any)[0]}${window.location.pathname}`
    }
  }, [])

  const handleSubmit = async (values: any) => {
    LoginByMobile(values).then((res: any) => {
      if (res && res.length) {
        message.success('登录成功')
        if (res && res.length) {
          clearCookie()
          localStorage.clear()
          localStorage.setItem('loginPlatformList', JSON.stringify(res))
          setTimeout(() => {
            history.push(`/main/platformPicker`)
          }, 200);
        }
      }
    })
  }

  return (
    <div className={styles.login_content}>
      <LoginForm
        title={
          isForgotPassword ? (
            <div className={styles.login_title}>
              <LeftOutlined className={styles.back_icon} onClick={() => setIsForgotPassword(false)} />
              <div>密码重置</div>
            </div>
          ) : (
            `欢迎来到${DEFAULT_NAME}`
          )
        }
        subTitle={' '}
        submitter={{ searchConfig: { submitText: isForgotPassword ? '重置密码' : '登录' } }}
        initialValues={{
          autoLogin: true
        }}
        onFinish={async values => {
          handleSubmit(values)
        }}
        className={styles.login_form_block}
      >
        <>
          <ProFormText
            fieldProps={{
              size: 'large',
              prefix: <MobileOutlined className={'prefixIcon'} />
            }}
            name='mobile'
            placeholder={'手机号'}
            rules={[
              {
                required: true,
                message: '请输入手机号！'
              },
              {
                pattern: /^1\d{10}$/,
                message: '手机号格式错误！'
              }
            ]}
          />
          <ProFormCaptcha
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined className={'prefixIcon'} />
            }}
            captchaProps={{
              size: 'large'
            }}
            placeholder={'请输入验证码'}
            captchaTextRender={(timing, count) => {
              if (timing) {
                return `${count} ${'获取验证码'}`
              }
              return '获取验证码'
            }}
            name='code'
            phoneName='mobile'
            rules={[
              {
                required: true,
                message: '请输入验证码！'
              }
            ]}
            onGetCaptcha={async (mobile: string) => {
              // 获取验证码
              let params = {
                mobile
              }
              let res = await SendCode(params)
              if (res) {
                message.success('获取验证码成功,请注意查收')
              }
            }}
          />
        </>
      </LoginForm>
    </div>
  )
}

export default Login
